<template>
  <a-card>
    <template #title>
      <a-form>
        <a-row :gutter="16">
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('订单编号')">
              <a-input v-model:value="page.orderId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('用户姓名')">
              <a-input v-model:value="page.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('手机号码')">
              <a-input v-model:value="page.phone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24" v-show="isPermission('user')">
            <a-form-item :label="$t('客服')">
              <a-select v-model:value="page.employeeId" allowClear>
                <a-select-option v-for="item in systemUserList" :key="item.id" :value="item.id">{{
                    item.name
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24" >
            <a-form-item :label="$t('注册渠道')">
              <a-select v-model:value="page.channel" allowClear>
                <a-select-option v-for="item in channelList" :key="item" :value="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('申请时间')">
              <a-range-picker v-model:value="page.timeValue" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-table style="margin-top: 20px" :columns="totalTableColumn" :pagination="false" :data-source="totalTableData"
               bordered></a-table>
    </template>
    <a-table row-key="id" :columns="tableColumn" :pagination="pagination" :data-source="tableData" :scroll="{x:1000}">
      <template #operation="{record }">
        <a-button type="link" @click="lookDetails(record)" v-show="isPermission('details')">{{ $t('明细') }}</a-button>
      </template>
    </a-table>
    <a-modal v-model:visible="incomeDetailsVisible" :title="tableRows.loanRecordId +  ' - ' + $t('收支明细')" width="1000px"
             :footer="false">
      <a-table :scroll="{y:400}" :columns="incomeDetailsTableColumn" :pagination="false"
               :data-source="incomeDetailsTableData"
               bordered></a-table>
      <div style="text-align: right;margin-right: 20px;margin-top: 20px">
        合计纯收入: {{ totalAmount }}
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import {reactive, ref, toRefs, onMounted, computed, createVNode} from 'vue'
import {getIncomeList, getIncomeTotalProfit, getIncomeDetails, getIncomeTotal} from "@/api/finance"
import {selectChannelList, selectSystemUser} from "../../../api";
import locale from '@/locale'

const {t} = locale.global;
import {hasPermission,dateFormatTimeStamp} from '@/utils'

const tableColumn = [
  {title: t('订单编号'), dataIndex: 'loanRecordId', width: 150, align: 'center', fixed: 'left',},
  {title: t('用户姓名'), dataIndex: 'name', width: 150, align: 'center'},
  {title: t('手机号码'), dataIndex: 'phone', width: 150, align: 'center'},
  {title: t('申请时间'), dataIndex: 'loanTime', width: 150, align: 'center'},
  {title: t('申请金额'), dataIndex: 'loanAmount', width: 150, align: 'center'},
  {title: t('借款周期'), dataIndex: 'loanTerm', width: 150, align: 'center'},
  {title: t('客服'), dataIndex: 'employeeName', width: 150, align: 'center'},
  // {title: t('保证金收入'), dataIndex: 'riskFeeProfit', width: 150, align: 'center'},
  {title: t('保证金收入'), dataIndex: 'withdrawFeeProfit', width: 150, align: 'center'},
  {title: t('解冻费收入'), dataIndex: 'thawFeeProfit', width: 150, align: 'center'},
  {title: t('事故处理费收入'), dataIndex: 'accidentFeeProfit', width: 150, align: 'center'},
  {title: t('插队费纯收入'), dataIndex: 'aheadFeeProfit', width: 150, align: 'center'},
  {title: t('合计纯收入'), dataIndex: 'totalProfit', width: 150, align: 'center'},
  {title: t('操作'), width: 100, align: 'center', fixed: 'right', slots: {customRender: 'operation',}},
]
const totalTableColumn = [
  {title: t('保证金收入'), dataIndex: 'withdrawFeeProfit', align: 'center'},
  {title: t('解冻费收入'), dataIndex: 'thawFeeProfit', align: 'center'},
  {title: t('事故处理费收入'), dataIndex: 'accidentFeeProfit', align: 'center'},
  {title: t('插队费纯收入'), dataIndex: 'aheadFeeProfit', align: 'center'},
  {title: t('合计纯收入'), dataIndex: 'totalProfit', align: 'center'},
]
const orderStatusList = [
  {key: 1, value: t('审核中')},
  {key: 2, value: t('待放款')},
  {key: 3, value: t('放款中')},
  {key: 4, value: t('放款失败')},
]
const walletProgressList = [
  {key: 1, value: t('可提现保证金')},
  {key: 2, value: t('待发起提现')},
  {key: 3, value: t('已发起提现')},
]
const incomeDetailsTableColumn = [
  {title: t('时间'), dataIndex: 'createTime', align: 'center'},
  {
    title: t('收入类型'), dataIndex: 'type', align: 'center', customRender: ({text, record, index}) => {
      const obj = {
        2: t('保证金'),
        3: t('解冻费'),
        4: t('事故处理费'),
        5: t('插队费') + '1',
        7: t('插队费') + '2',
        8: t('插队费') + '3',
      }
      return obj[text]
    }
  },
  {title: t('收入金额'), dataIndex: 'income', align: 'center'},
  {title: t('提现打款金额'), dataIndex: 'drawFee', align: 'center'},
  {title: t('纯收入'), dataIndex: 'grossProfit', align: 'center'},
]
export default {
  name: "ExpensesDetails",
  setup() {
    const formRef = ref(null)
    const totalAmount = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableRows: {},
      incomeDetailsVisible: false,
      tableData: [],
      totalTableData: [],
      systemUserList: [],
      incomeDetailsTableData: [],
      channelList:[]
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total ,
      onChange: (page) => {
        state.page.pageNum = page
        method.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        method.getTableData()
      }
    }))
    const method = {
      async getTableData() {
        const [startTime, endTime] =dateFormatTimeStamp(state.page.timeValue || [])
        const params = {
          startTime, endTime,
          ...state.page,
        }
        delete params.timeValue
        console.log(params)
        method.getTotal(params)
        const res = await getIncomeList(params)
        if (res.code === 1) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      async getTotal(params) {
        const res = await getIncomeTotal(params)
        if (res.code === 1 && res.data) {
          state.totalTableData = [res.data]
        } else {
          state.totalTableData = []
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        method.getTableData()
      },
      async lookDetails(record) {
        state.tableRows = {...record}
        const res = await getIncomeDetails({
          orderId: record.loanRecordId
        })
        if (res.code === 1) {
          state.incomeDetailsTableData = res.data
          state.incomeDetailsVisible = true
        }
        const res2 = await getIncomeTotalProfit({
          orderId: record.loanRecordId
        })
        if (res2.code === 1) {
          totalAmount.value = res2.data
        }
      },
      isPermission(value) {
        return hasPermission('ExpensesDetails', value)
      }
    }
    onMounted(() => {
      method.getTableData()
      if (method.isPermission('user')) {
        selectSystemUser().then(res => {
          state.systemUserList = res.data
        })
      }
      selectChannelList().then(res => {
        state.channelList = res.data
      })
    })
    return {
      totalAmount,
      incomeDetailsTableColumn,
      totalTableColumn,
      walletProgressList,
      orderStatusList,
      tableColumn,
      formRef,
      pagination,
      ...method,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>

